<script setup lang="ts">
const {
  title = '',
  subTitle = '',
  icon,
  iconColor = '#409EFF',
  edit = () => {},
  del = () => {}
} = defineProps<{
  title?: string
  subTitle?: string
  icon?: IconType
  iconColor?: string
  edit?: () => void
  del?: (cascade: boolean) => void
}>()
</script>

<template>
  <s-card1
    card-class="card-class"
    :icon-type="icon?.iconType"
    :icon-props="icon?.iconProps"
    :icon-color="iconColor"
    icon-class="!p-2"
    :title="title"
    :sub-title="subTitle"
  >
    <template #actions>
      <div class="flex">
        <edit-btn :click="edit" />
        <del-btn :confirm="del" />
      </div>
    </template>
    <template #content>
      <slot name="content" />
    </template>
  </s-card1>
</template>

<style lang="scss">
.card-class {
  .el-button {
    font-size: 1.05rem;
    padding: 0.5rem;
  }
}
</style>
